import React from "react";
import { Link, useLocation } from "react-router-dom";
import { createPageUrl } from "@/utils";
import {
  LayoutDashboard,
  FolderOpen,
  MapPin,
  FileText,
  Zap,
  Menu,
  Bell,
  User,
  Brain, // Added Brain icon
  Users, // 新增Users图标
  Settings, // 添加Settings图标
  Book, // Added Book icon
  GitBranch,
  Pilcrow,
} from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
  SidebarFooter,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { Badge } from "@/components/ui/badge";

const navigationItems = [
  {
    title: "驾驶舱",
    url: createPageUrl("Dashboard"),
    icon: LayoutDashboard,
  },
  {
    title: "项目管理",
    url: createPageUrl("Projects"),
    icon: FolderOpen,
  },
  // {
  //   title: "杆塔管理",
  //   url: createPageUrl("Towers"),
  //   icon: Pilcrow,
  // },
  // {
  //   title: "交叉跨越点管理",
  //   url: createPageUrl("CrossingPoints"),
  //   icon: MapPin,
  // },
  {
    title: "勘察单管理",
    url: createPageUrl("TensionSections"),
    icon: GitBranch,
  },
  {
    title: "施工方案管理",  
    url: createPageUrl("ConstructionSchemes"),
    icon: FileText,
  },
  {
    title: "知识库管理", // New navigation item
    url: createPageUrl("KnowledgeBase"),
    icon: Brain,
  },
  {
    title: "文档模板管理", // 新增模板管理入口
    url: createPageUrl("DocumentTemplates"),
    icon: FileText,
  },
  // {
  //   title: "全局事件管理", // New navigation item
  //   url: createPageUrl("GlobalEvents"),
  //   icon: Bell,
  // },
  // {
  //   title: "作业单位管理", // 新增菜单项
  //   url: createPageUrl("OperationalUnits"),
  //   icon: Users,
  // },
  // {
  //   title: "变量配置管理", // New navigation item for variable config
  //   url: createPageUrl("SystemVariableConfigPage"),
  //   icon: Book,
  // },
  {
    title: "系统配置", // 新增系统配置菜单项
    url: createPageUrl("SystemConfig"),
    icon: Settings,
  },
];

export default function Layout({ children, currentPageName }) {
  const location = useLocation();

  // 抑制Tailwind CDN生产环境警告
  React.useEffect(() => {
    // 重写console.warn来过滤Tailwind警告
    const originalWarn = console.warn;
    console.warn = (...args) => {
      const message = args.join(" ");
      if (
        message.includes("cdn.tailwindcss.com") ||
        message.includes("should not be used in production")
      ) {
        return; // 忽略Tailwind CDN警告
      }
      originalWarn.apply(console, args);
    };

    return () => {
      console.warn = originalWarn; // 清理时恢复原始warn函数
    };
  }, []);

  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full bg-gray-50">
        <Sidebar className="border-r border-gray-200 bg-white">
          <SidebarHeader className="border-b border-gray-100 p-6">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center shadow-lg">
                <Zap className="w-6 h-6 text-white" />
              </div>
              <div>
                <h2 className="font-bold text-gray-900 text-lg">输电线路</h2>
                <p className="text-sm text-gray-500">跨越施工方案管理</p>
              </div>
            </div>
          </SidebarHeader>

          <SidebarContent className="p-3">
            <SidebarGroup>
              <SidebarGroupLabel className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 py-2 mb-2">
                导航菜单
              </SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu className="space-y-1">
                  {navigationItems.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton
                        asChild
                        className={`rounded-lg transition-all duration-200 ${
                          location.pathname === item.url
                            ? "bg-blue-50 text-blue-700 border-blue-200 shadow-sm"
                            : "hover:bg-gray-50 text-gray-700 hover:text-gray-900"
                        }`}
                      >
                        <Link
                          to={item.url}
                          className="flex items-center gap-3 px-3 py-2.5"
                        >
                          <item.icon className="w-5 h-5" />
                          <span className="font-medium">{item.title}</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>

          <SidebarFooter className="border-t border-gray-100 p-4">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 bg-gradient-to-br from-gray-600 to-gray-700 rounded-full flex items-center justify-center">
                <User className="w-5 h-5 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="font-semibold text-gray-900 text-sm truncate">
                  施工管理员
                </p>
                <p className="text-xs text-gray-500 truncate">工程技术部</p>
              </div>
            </div>
          </SidebarFooter>
        </Sidebar>

        <main className="flex-1 flex flex-col">
          {/* Mobile Header */}
          <header className="bg-white border-b border-gray-200 px-6 py-4 lg:hidden">
            <div className="flex items-center justify-between">
              <SidebarTrigger className="hover:bg-gray-100 p-2 rounded-lg transition-colors duration-200">
                <Menu className="w-5 h-5" />
              </SidebarTrigger>
              <div className="flex items-center gap-2">
                <Zap className="w-6 h-6 text-blue-600" />
                <h1 className="text-lg font-bold text-gray-900">
                  输电线路管理
                </h1>
              </div>
              <div className="flex items-center gap-2">
                <Bell className="w-5 h-5 text-gray-400" />
              </div>
            </div>
          </header>

          {/* Main Content */}
          <div className="flex-1 overflow-auto">{children}</div>
        </main>
      </div>
    </SidebarProvider>
  );
}
